<template>
  <div class="game_swiper_content">
    <Swiper
      ref="swiperRef"
      class="my-swipe"
      :autoplay="false"
      :showIndicators="false"
    >
      <SwiperItem
        class="game_list"
        v-for="swiperItem in gameInfo.swiperList || []"
        :key="swiperItem.id"
      >
        <GameItem v-for="item in swiperItem" :key="item.id" :itemInfo="item" />
      </SwiperItem>
    </Swiper>
  </div>
</template>

<script setup lang="ts">
import GameItem from "./GameItem.vue";

const props = defineProps({
  gameInfo: {
    type: Object,
    default: () => {},
  },
});

const swiperRef = ref();

watch(
  () => props.gameInfo?.swiperList,
  (newVal) => {
    props.gameInfo.swiperRef = swiperRef;
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
// 容器样式
.game_swiper_content {
  position: relative;
}
// 基础布局样式
.game_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.12rem;
  width: 100%;
  padding: 0 0.3rem;
}
</style>
